<template>
    <div class="recommends">
        <h3>热销推荐</h3>
        <div class="items" v-for="item of itemList" :key="item.id">
            <div class="item border-bottom clearfix">
                <img src="../../../assets/images/icon.png" alt="">
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">海洋世界真好玩海洋世界真好玩海洋世界真好玩</p>
                    <a href='javascript:;' class="more-btn">详情</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HomeRecommends',
    props: {
        itemList: Array
    }
}
</script>

<style lang="less" scoped>
    @import '~styles/varibles.less';
    .recommends{
        padding-top: .1rem;
        width: 100%;
        h3{
            width: 100%;
            height: 0.6rem;
            line-height: .6rem;
            background-color: #eee;
            text-indent: .2rem
        }
        .item{
            display: flex;
            img{
                width: 1.6rem;
                height: 1.6rem;
                padding: .1rem;
            }
            .item-info{
                flex: 1;
                margin-left: 10px;
                    .item-desc{
                        color: #ccc;
                        font-size: 12px;
                    }
                }
            .item-title{
                font-weight: 700;
                line-height: .6rem;
            }
            .more-btn{
                display: block;
                width: 1rem;
                height: .4rem;
                line-height: .4rem;
                background-color: orange;
                text-align: center;
                color:#fff;
                margin-top: 20px;
            }
        }
    }
</style>


